<template>
  <view class="queue-static-box">
    <!-- 时间筛选标签 -->
    <view class="newstyle-time-tabs">
      <view :class="{ 'active': selectedTime === 'today', 'time-tab': true }" @click="selectTime('today')">当天</view>
      <view :class="{ 'active': selectedTime === 'threeDays', 'no-border time-tab': true }" @click="selectTime('threeDays')">近三天</view>
      <view :class="{ 'active': selectedTime === 'sevenDays', 'time-tab': true }" @click="selectTime('sevenDays')">近七天</view>
    </view>
    
    <view class="queue-static-content">
      <!-- 统计概览 -->
      <view class="stats-overview">
        <view class="stat-item">
          <view class="stat-label">未排队</view>
          <view class="stat-value">{{ totalStats.notQueued }}</view>
        </view>
        <view class="stat-item">
          <view class="stat-label">已排队</view>
          <view class="stat-value">{{ totalStats.queued }}</view>
        </view>
        <view class="stat-item">
          <view class="stat-label">已叫号</view>
          <view class="stat-value">{{ totalStats.called }}</view>
        </view>
        <view class="stat-item">
          <view class="stat-label">已入场</view>
          <view class="stat-value">{{ totalStats.entered }}</view>
        </view>
      </view>
      
      <!-- 社会车辆排队统计 -->
      <view class="section">
        <view class="section-title">社会车辆排队统计</view>
        <view class="queue-list">
          <view class="queue-card" v-for="(item, index) in socialQueueList" :key="index" 
          @click="goToDetail(0,item)">
            <view class="queue-card-header">
              <text class="queue-card-title">{{ item.queueName.length > 5 ? item.queueName.substring(0, 5)+'...' : item.queueName }}</text>
            </view>
            <view class="queue-card-content">
              <view class="queue-info">
                <text class="queue-label">排队中：</text>
                <text class="queue-number">{{ item.lineup40010Total || 0 }}</text>
              </view>
              <view class="queue-info">
                <text class="queue-label">已叫号：</text>
                <text class="queue-number">{{ item.lineup40040Total || 0 }}</text>
              </view>
              <view class="queue-info">
                <text class="queue-label">已入场：</text>
                <text class="queue-number">{{ item.lineup40050Total || 0 }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
      
      <!-- VIP车辆排队统计 -->
      <view class="section">
        <view class="section-title">VIP车辆排队统计</view>
        <view class="queue-list">
          <view class="queue-card vip" v-for="(item, index) in vipQueueList" :key="index" 
          @click="goToDetail(1,item)">
            <view class="queue-card-header">
              <text class="queue-card-title">{{ item.type }}</text>
            </view>
            <view class="queue-card-content">
              <view class="queue-info">
                <text class="queue-label">排队中：</text>
                <text class="queue-number">{{ item.queuing }}</text>
              </view>
              <view class="queue-info">
                <text class="queue-label">已叫号：</text>
                <text class="queue-number">{{ item.called }}</text>
              </view>
              <view class="queue-info">
                <text class="queue-label">已入场：</text>
                <text class="queue-number">{{ item.entered }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getCardsLists ,getCustList} from '@/api/queueStatistics';
import { getDateFormat } from '@/utils/common.js';
import { productLists } from '@/api/tranplan.js';
export default {
  data() {
    return {
      selectedTime: 'today',
      totalStats: {
        notQueued: 10,
        queued: 10,
        called: 10,
        entered: 10
      },
      queryParams: {
        startTime: '',
        endTime: ''
      },
      socialQueueList: [
        { type: '三八块', queuing: 2, called: 15, entered: 23 },
        { type: '三八块', queuing: 2, called: 15, entered: 23 },
        { type: '三八块', queuing: 2, called: 15, entered: 23 }
      ],
      vipQueueList: [
        { type: '三八块', queuing: 2, called: 15, entered: 23 },
        { type: '三八块', queuing: 2, called: 15, entered: 23 }
      ],
      cusLists: [],
      coalsLists: []
    }
  },
  async onShow() {
    // const endDate = new Date();
    // endDate.setHours(23, 59, 59, 999);
    // this.queryParams.endTime = getDateFormat(endDate);
    // const startDate = new Date();
    // startDate.setHours(0, 0, 0, 0);
    // this.queryParams.startTime = getDateFormat(startDate);
    const res = await getCustList();
    if (res.code == 0) {
      this.cusLists = res.data || [];
    }
    const resPro = await productLists();
    if (resPro?.code === 0) {
      this.coalsLists = resPro?.data || [];
    }
    this.queryParams.startTime= '2025-01-05 00:00:00',//this.queryParams.startTime,
    this.queryParams.endTime= '2025-11-05 23:59:59',//this.queryParams.endTime,
    this.getDataLists()
    // this.goToDetail(1, {})
  },
  methods: {
    goToDetail(type,item) {
      // 构建并编码URL参数，确保特殊字符能正确传递
      const params = {
        startTime: '2025-01-05 00:00:00',//this.queryParams.startTime,
        endTime: '2025-11-05 23:59:59',//this.queryParams.endTime,
        queueVehicleType: type,//item.queueVehicleType,
        queueConfigId: item.queueConfigId,
        queueType: 2,//销售
      };
      
      // 将参数对象转换为URL查询字符串
      const queryString = Object.keys(params)
        .map(key => `${key}=${encodeURIComponent(params[key])}`)
        .join('&');
      
      // 导航到详情页并传递编码后的参数
      this.$tab.navigateTo(`/packageA/pages/queueStatistics/details?${queryString}`);
    },
    selectTime(timeType) {
      this.selectedTime = timeType;
      
      const endDate = new Date();
      endDate.setHours(23, 59, 59, 999);
      // 使用getDateFormat函数将日期格式化为年月日时分秒格式
      this.queryParams.endTime = getDateFormat(endDate);
      
      const startDate = new Date();
      if (timeType == 'today') {
        startDate.setHours(0, 0, 0, 0);
      } else if (timeType == "threeDays") {
        startDate.setTime(startDate.getTime() - 2 * 24 * 60 * 60 * 1000);
        startDate.setHours(0, 0, 0, 0);
      } else if (timeType == 'sevenDays') {
        startDate.setTime(startDate.getTime() - 6 * 24 * 60 * 60 * 1000);
        startDate.setHours(0, 0, 0, 0);
      }
      
      this.queryParams.startTime = getDateFormat(startDate);
      this.getDataLists()
    },
   
    async getDataLists() {
      let res = await getCardsLists(this.queryParams)
      if (res.code == 0) {
        this.totalStats.notQueued = res.data.lineup10010Total?.vehiclesTotal
        this.totalStats.queued = res.data.lineup40010Total?.vehiclesTotal
        this.totalStats.called = res.data.lineup40040Total?.vehiclesTotal
        this.totalStats.entered = res.data.lineup40050Total?.vehiclesTotal
        // 更新车辆统计数据
        this.socialQueueList = res.data.socialVehiclesStatistics || []
        this.vipQueueList = res.data.vipVehiclesStatistics || []

        if (!!this.socialQueueList && this.socialQueueList.length > 0) {
          this.socialQueueList = this.socialQueueList.map(item => {
            if (!!item.customerIds && item.customerIds?.length > 0) {
              item.customerIds.forEach(customerId => {
                let cus = this.cusLists.find(c => c.id == customerId)
                if (!!cus) {
                  item['queueName'] = cus.shortName
                }
              })
            }
            if (!!item.coalIds && item.coalIds?.length > 0) {
              // 初始化queueName为空字符串，避免undefined情况
              item.coalIds.forEach(customerId => {
                let cus = this.coalsLists.find(c => c.id == customerId)
                if (!!cus) {
                  // 使用+=累加多个煤种名称，避免覆盖
                  item['queueName'] += (item['queueName'] ? ',' : '') + cus.proName;
                }
              })
            }
            // 使用trimEnd更简洁地移除尾部逗号（如果存在）
            if (item['queueName']) {
              item['queueName'] = item['queueName'].trimEnd(',');
            }
            return item
          })
          console.log(this.socialQueueList,"????====")
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.newstyle-time-tabs {
  display: flex;
  background-color: #ffffff;
  box-sizing: border-box;
  padding: 0 10px 10px 10px;
  .time-tab {
    flex: 1;
    text-align: center;
    padding: 8px 0;
    font-size: 14px;
    color: #409EFF;
    background-color: transparent;
    transition: all 0.3s ease;
    border: 1px solid #409EFF;
  }
  .time-tab.no-border{
    border-left: 0;
    border-right: 0;
  }
  .time-tab:first-child {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
  }
  .time-tab:last-child {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
  }
  .time-tab.active {
    background-color: #409EFF;
    color: #ffffff;
    font-weight: 500;
  }

  .time-tab:active {
    opacity: 0.7;
  }
}
</style>